import React, { Component } from 'react';
import { List,Scroller,Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
require('isomorphic-fetch');
import './index.scss';

class Detail extends Component {
    constructor(){
        super();
        this.state = {
            dataSource: [{text:'',key: ++guid }]
        }
    }

    getData(){
        fetch('http://localhost:3000/skills')
        .then((res) => {
            return res.json();
        }).then((skills) => {
            this.setState({
                dataSource:skills
            })
        });
    }
    componentWillMount(){
        this.getData()
    }

    getGroup(i) {
        return (
            <div key={i} className="demo-group">
                <Scroller.Sticky>
                    <div style={{ height: 40, lineHeight: 40 + 'px' }} className="sticky-title">
                        <h3  className="label">{i}</h3>
                    </div>
                </Scroller.Sticky>
            </div>
        );
    }
    
    render() {
        return (
            <div className="yo-flex">
                <Header title="技能页" left={false} />
                <List
                    staticSection={
                        <div className="yo-list yo-list-group demo-static-header">
                            <h3 className="label">基础技能</h3>
                            {["基础技能", "现代化前端技能", "后台技能", "工具"].map(num => this.getGroup(num))}
                        </div>
                    }
                    ref="list"
                    extraClass="flex m-list"
                    dataSource={this.state.dataSource}
                    renderItem={(item, i) => [<a className="item skill" key={i}>
                        <img src={item.img}/>
                        <div className="flex">
                            <h3 className="title">{item.title}</h3>
                            <p className="introduce">{item.introduce}</p>
                        </div></a>]}
                    infinite={true}
                    infiniteSize={20}
                    itemHeight={144}
                    itemExtraClass={(item, i) => {
                        return 'item ' + i;
                    }}
                    onItemTap={(item, i, ds) => {
                        yoHistory.push('/detail');
                    }}
                />


                <Scroller extraClass="flex">
                <div className="yo-list yo-list-group">
                    
                    {/* <a href="#" className="item">
                        <img src="http://img5.imgtn.bdimg.com/it/u=1009749612,3321350649&fm=27&gp=0.jpg"/>
                        <div className="flex">
                            <h3 className="title">ES5</h3>
                            <p className="introduce">ECMAScript第五个版本</p>
                        </div>
                    </a>
                    <a href="#" className="item">
                        <img src="http://img4.imgtn.bdimg.com/it/u=2317441221,1159211641&fm=27&gp=0.jpg"/>
                        <div className="flex">
                            <h3 className="title">ES6</h3>
                            <p className="introduce">ECMAScript6在保证向下兼容的前提下，提供大量新特效</p>
                        </div>
                    </a> */}
                    <h3 className="label">现代化前端技能</h3>
                    <a href="#" className="item">list item</a>
                    <a href="#" className="item">list item</a>
                    <h3 className="label">后台技能</h3>
                    <a href="#" className="item">list item</a>
                    <a href="#" className="item">list item</a>
                    <h3 className="label">工具</h3>
                    <a href="#" className="item">list item</a>
                    <a href="#" className="item">list item</a>
                </div>
                </Scroller>
                <Footer/>
            </div>
        )
    }
}

let guid = -1;


export default Detail;
